<template>
  <section class="qidaka">
    <div class="container mx-auto flex flex-col md:flex-row items-center">
      <div class="w-full md:w-1/2 p-8 text-white">
        <h3 class="title">企大咖</h3>
        <div class="py-2 space-x-2 space-y-2">
          <span class="tag" style="--theme: #595959"> uni-app </span>
          <span class="tag" style="--theme: #595959"> uview </span>
          <span class="tag" style="--theme: #595959"> 小程序 </span>
        </div>
        <div class="describe text-sm">
          <p class="dot">在线服务(外包)提供平台，公司自营项目。</p>
          <p class="dot">
            提供包括设计、开发、影视、剪辑、品牌策划等服务以及企划代理。功能包括发布需求、商家店铺、服务、案例、企划代理、积分商城等等。
          </p>
          <p class="dot">
            使用 uniapp 和 uview 进行开发，vue2 技术栈，打包的安卓
            app，无其他端。
          </p>
        </div>
      </div>

      <div class="w-full md:w-1/2 h-full flex items-center">
        <swiper
          effect="cards"
          :grabCursor="true"
          :modules="modules"
          :cardsEffect="cardsEffect"
          :autoplay="autoplay"
          class="mySwiper"
        >
          <swiper-slide>
            <img src="../assets/imgs/qdk1.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/imgs/qdk2.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/imgs/qdk3.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/imgs/qdk4.jpg" alt="" />
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </section>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { EffectCards, Autoplay } from 'swiper'
import 'swiper/css'
import 'swiper/css/effect-cards'

let modules = [EffectCards, Autoplay]
let cardsEffect = {
  perSlideRotate: 8
}
let autoplay = {
  delay: 5000
}
</script>

<style lang="scss" scoped>
.qidaka {
  display: flex;
  width: 100%;
  background: linear-gradient(135deg, #232526, #414345);

  .swiper {
    width: 40%;
  }

  .swiper-slide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
}

img {
  max-width: 100%;
  height: auto;
}
</style>
